<template>
  <div class="ForgetPwd">
    <div class="ForgetPwd-banner">
      <img src="static/img/Login/login.png" width="100%" height="auto" />
    </div>
    <div class="ForgetPwd-Input">

      <div class="ForgetPwd-Input-Pwd">
        <div class="ForgetPwd-Input-Pwd-Icon">
          <div class="ForgetPwd-Input-Pwd-Icon1">
            <img src="static/img/Login/phone.png" class="ForgetPwdImg1" />
          </div>
          <input class="PwdInput" type="number" name="" id="" value="" placeholder="请输入您的手机" pattern="[0-9]*" v-model="Phone" @blur="Blur"/>
        </div>
      </div>
      <div class="ForgetPwd-Input-Phone">
        <div class="ForgetPwd-Input-Phone-Icon">
          <div class="ForgetPwd-Input-Pwd-Icon1">
            <img src="static/img/Login/yzm.png" class="ForgetPwdImg" />
          </div>

          <input class="PhoneInput" type="number" name="" id="" value="" placeholder="请输入验证码" pattern="[0-9]*" v-model="Yzm" @blur="Blur"/>
          <button class="ForgetPwd-Input-Phone-Get" @click="yzm"><span>{{checkText}}</span></button>
        </div>
      </div>
      <div class="ForgetPwd-Input-Pwd">
        <div class="ForgetPwd-Input-Pwd-Icon">
          <div class="ForgetPwd-Input-Pwd-Icon1">
            <img src="static/img/Login/password.png" class="ForgetPwdImg" />
          </div>

          <input class="PwdInput" type="password" name="password" id="pwd" value="" placeholder="请输入新密码" v-model="NewPwd"
            autocomplete='off' @blur="Blur"/>
        </div>
      </div>

    </div>
    <div class="ForgetPwd-Info">
      <button class="ForgetPwd-Info-Button" @click="GotoLogin()">确定</button>
    </div>
  </div>
</template>

<script>
  import {
    Indicator,
    Toast
  } from 'mint-ui';
  export default {
    name: 'InitialPwd',
    data() {
      return {
        Phone: '',
        Yzm: '',
        NewPwd: '',
        mes: '',
        sid: 'CTHH',
        Click: true,
        checkTime: 120,
        checkText: '获取验证码'
      }
    },
    components: {},
    created: function () {},
    methods: {
      // 获取验证码
      yzm: function () {
        var vm = this;
        if (this.checkText == '获取验证码') {
          Indicator.open({
            text: '获取中...',
          });
          this.checkText = '获取中...'
          this.$ApiCom.VerifyCode(this.Phone).then(function (res) {
            Indicator.close();
            if (res.data.errCode == 0) {
              Indicator.open({
                text: '获取成功...'
              });
              var setout = setInterval(() => {
                Indicator.close();
                if (vm.checkTime < 1) {
                  vm.checkText = '获取验证码';
                  vm.checkTime = 120;
                  clearInterval(setout);
                } else {
                  vm.checkTime--;
                  vm.checkText = vm.checkTime + '秒';
                }
              }, 1000);
            } else {
              Toast({
                message: res.data.errMsg,
                duration: 1000
              });
            }
          }, function () {
            Indicator.close();
            Toast({
              message: '响应超时',
              duration: 1000
            });
          })
        } else {
          Toast({
            message: '请勿重复点击',
            duration: 1000
          });
        }




      },
      GotoLogin: function (e) {
        Indicator.open({
          text: '修改中...',
        });
        var vm = this
        this.$ApiCom.Update(this.Yzm, this.Phone, this.NewPwd, this.sid).then(function (res) {
          Indicator.close();
          if (res.data.errMsg == '更新成功') {
            Indicator.open({
              text: '更新成功...',
            });
            setTimeout(function () {
              Indicator.close();
              var Sid = localStorage.getItem('Sid');
              vm.$router.push({
                path: `/Login`
              })
            }, 1000)
          } else {
            Toast({
              message: res.data.errMsg,
              duration: 1000
            });
          }
        }, function () {
          Indicator.close();
          Toast({
            message: '响应超时',
            duration: 1000
          });
        })


      },
      Blur(){
        document.body.scrollTop = 0;
      }
    }
  }

</script>

<style scoped>
  @import url("css/InitialPwd.css");

</style>
